<template>
  <van-row class="name-show">
    <van-col class="name-show-item" span="6" v-for="item in value" :key="item[props.response.id]">
      <HuNameImg
        :portraitURL="item[props.response.avatar]"
        :name="item[props.response.name]"
        layout="vertical"
        imageWidth="30"
      />
      <van-icon
        name="clear"
        class="name-show-del"
        v-if="isEdit"
        @click="handleDelete(item[props.response.id])"
      />
    </van-col>
  </van-row>
</template>

<script>
import HuNameImg from "../../../huComponents/HuNameImg.vue";
export default {
  components: {
    HuNameImg
  },
  name: "",
  model: {
    prop: "value", // 绑定的值，通过父组件传递
    event: "update"
  },
  props: {
    value: {
      type: Array,
      default: () => []
    },
    props: {
      type: Object,
      default: () => {}
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  methods: {
    handleDelete(id) {
      if (this.readonly) return;
      const select = this.value.filter(
        item => item[this.props.response.id] !== id
      );
      this.$emit("update", select);
      this.$emit("change", select);
    }
  }
};
</script>

<style lang="scss">
.name-show {
  width: 100%;
  box-sizing: border-box;
  .hu-nameImg--vertical .hu-nameImg-text {
    width: 100% !important;
  }
  .name-show-item {
    position: relative;
    .name-show-del {
      position: absolute;
      right: 14px;
      top: -6px;
      color: red;
      cursor: pointer;
    }
  }
}
</style>
